<template>
  <a-popover>
    <div class="cursor">
      <div v-if="tableList.length >= 1">
        <!-- <a-tag bordered color="arcoblue">{{ $extract(tableList[0], 'dataFromRestApi.sku') }}</a-tag> -->
        <a-tag class="ml5" bordered color="arcoblue">{{ tableList.length }}{{ tableList.length > 100 ? '+' : '' }}...</a-tag>
      </div>
      <!-- <div v-else-if="tableList.length == 1">
        <a-tag bordered color="arcoblue">{{ $extract(tableList[0], 'dataFromRestApi.sku') }}</a-tag>
      </div> -->
      <div v-else>--</div>
    </div>
    <template #content>
      <a-table size="mini" style="width: 900px" class="table-single-line" :data="tableList" :pagination="false" :scroll="{ x: '800px', y: 300 }">
        <template #columns>
          <!-- 只有在线商品才会显示ID -->
          <a-table-column title="ID" #cell="{ record }" :width="80">
            {{ record.dataFromRestApi.id }}
          </a-table-column>
          <a-table-column title="图片" #cell="{ record }" :width="60">
            <ImgPopover :src="imgUrl(record)">
              <template #con>
                <a-image :preview="false" width="40" height="40" fit="contain" :src="imgUrl(record)" />
              </template>
            </ImgPopover>
          </a-table-column>

          <!-- <a-table-column v-if="showSaleType(props.data) == '一口价'" :width="80">
            <template #title>
              <a-popover content="采购单价从最近的采购订单上获取，如果没有说明该SKU没有采购过">
                <p>
                  <span>采购单价</span>
                  <icon-question-circle />
                </p>
              </a-popover>
            </template>
            <template #cell="{ record }"> {{ record.price ? record.price : '--' }} </template>
          </a-table-column>
          <a-table-column v-if="showSaleType(props.data) == '一口价'" :width="80">
            <template #title>
              <a-popover content="有些产品数据是从网上抓取的，这个参考售价就是网上的在售价格">
                <p>
                  <span>参考售价</span>
                  <icon-question-circle />
                </p>
              </a-popover>
            </template>
            <template #cell="{ record }"> {{ record.sale_price ? record.sale_price : '--' }} </template>
          </a-table-column> -->

          <a-table-column title="库存SKU" #cell="{ record }" :width="80">
            <TextLimit position="top" :val="$extract(record, 'dataFromRestApi.sku') || '--'"></TextLimit>
          </a-table-column>
          <a-table-column title="变体属性" #cell="{ record }" :width="160">
            <!-- <TextLimit position="top" :val="getAllName(record.dataFromRestApi.attributes) || '--'"></TextLimit> -->
            <div v-for="(item, index) of record.dataFromRestApi.attributes || []"> {{ item.name }} - {{ item.option }} </div>
          </a-table-column>
          <a-table-column title="重量(g)" #cell="{ record }" :width="60">
            {{ $extract(record, 'dataFromRestApi.weight') || '--' }}
          </a-table-column>
          <a-table-column title="尺寸(L*W*H)cm" #cell="{ record }" :width="100">
            {{ $extract(record, 'dataFromRestApi.dimensions.length') || '-' }}
            <span>*</span>
            {{ $extract(record, 'dataFromRestApi.dimensions.width') || '-' }}
            <span>*</span>
            {{ $extract(record, 'dataFromRestApi.dimensions.height') || '-' }}
          </a-table-column>
          <a-table-column v-if="showSaleType(props.data) == '一口价'" title="促销价格" #cell="{ record }" :width="80">
            {{ $extract(record, 'dataFromRestApi.sale_price') || '-' }}
          </a-table-column>
          <a-table-column v-if="showSaleType(props.data) == '一口价'" title="常规售价" #cell="{ record }" :width="80">
            {{ $extract(record, 'dataFromRestApi.regular_price') || '-' }}
          </a-table-column>
          <a-table-column v-if="showSaleType(props.data) != '一口价'" title="阶梯售价" #cell="{ record }" :width="140">
            <div v-for="(item, index) of getMetaDataArr(props.data)" :key="index">
              <span>{{ item.quantity }}</span>
              <span>-</span>
              <span>{{ item.endNum }}</span>
              <span>：</span>
              <span>${{ item.price }}</span>
            </div>
          </a-table-column>
          <a-table-column title="库存状态" #cell="{ record }" :width="70">
            {{ stockOrderMap[$extract(record, 'dataFromRestApi.stock_status')] || $extract(record, 'dataFromRestApi.stock_status') }}
          </a-table-column>
          <a-table-column title="描述" #cell="{ record }" :width="160">
            <div v-if="$extract(record, 'dataFromRestApi.description')" v-html="$extract(record, 'dataFromRestApi.description')"></div>
            <div v-else>--</div>
          </a-table-column>
        </template>
      </a-table>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  import _ from 'lodash-es'
  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
  })

  const stockOrderMap = {
    instock: '有货',
    outofstock: '无货',
    onbackorder: '延迟交货',
  }

  const tableList = ref(props.data?.variationList || [])
  const imgUrl = (info: any) => {
    return info.dataFromRestApi?.image?.src || ''
  }

  const getAttValue = (data: any) => {
    let arr = data.options || []
    return arr.join(',')
  }
  const getAllName = (attrList: any) => {
    let arr: any = []
    attrList.forEach((e: any) => {
      arr.push(e.name)
      if (e.options) arr.push(getAttValue(e))
    })
    return arr.join(' - ')
  }

  const showSaleType = (data: any) => {
    let arr = data?.dataFromRestApi?.meta_data || []
    if (arr[0]) {
      let item = arr.find((e: any) => e.key == 'wpcpq_enable')
      return item && item.value == 'disable' ? '一口价' : '阶梯价'
    } else {
      return '--'
    }
  }

  const getMetaDataArr = (data: any) => {
    let resArr = []
    let arr = data?.dataFromRestApi?.meta_data || []
    if (arr[0]) {
      let item = arr.find((e: any) => e.key == 'wpcpq_prices')?.value || {}
      if (item.length > 3) resArr = JSON.parse(item).tiers
    }
    return resArr
  }
</script>

<style lang="less" scoped></style>
